<template>
  <div class="main">
    <p class="main_text">商户售后管理</p>
    <!-- 搜索 -->
    <div class="g-search" ref="searchBox">
      <!-- 时间选择区域 -->
      <div class="demo-date-picker">
        <div class="block">
          <span class="demonstration">申请时间：</span>
          <el-date-picker
            v-model="searchValue.startAt"
            type="date"
            placeholder="开始时间"
            @change="startTime"
            :clearable="false"
            :default-time="defaultTime(0, 0, 0)" />
          <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px"
            >至</span
          >
          <el-date-picker
            v-model="searchValue.endAt"
            type="date"
            placeholder="结束时间"
            @change="endTime"
            :clearable="false"
            :default-time="defaultTime1(23, 59, 59)" />
          &emsp;
          <el-radio-group v-model="radio" class="ml-4" @change="radioSelect">
            <el-radio label="1" size="large">今天</el-radio>
            <el-radio label="2" size="large">昨天</el-radio>
            <el-radio label="3" size="large">近三天</el-radio>
            <el-radio label="4" size="large">近一周</el-radio>
            <el-radio label="5" size="large">近一个月</el-radio>
            <el-radio label="6" size="large">近三个月</el-radio>
            <el-radio label="7" size="large">近一年</el-radio>
          </el-radio-group>
        </div>
      </div>
      <!-- 信息区域 -->
      <div class="all_select" style="flex-wrap: wrap">
        <!-- 店铺ID -->
        <div class="input_valye">
          <span class="demonstration">店铺ID：</span>
          <input
            type="text"
            class="input"
            placeholder="请输入店铺ID"
            v-model="searchValue.shopId"
            style="width: 200px"
            @keyup.enter="search" />
        </div>
        <!-- 店铺名称 -->
        <div class="input_valye">
          <span class="demonstration">店铺名称：</span>
          <input
            type="text"
            class="input"
            placeholder="请输入店铺名称"
            v-model="searchValue.shopName"
            style="width: 200px"
            @keyup.enter="search" />
        </div>
        <!-- 订单编号 -->
        <div class="input_valye">
          <span class="demonstration">订单编号：</span>
          <input
            type="text"
            class="input"
            placeholder="请输入订单编号"
            v-model="searchValue.orderSn"
            style="width: 200px"
            @keyup.enter="search" />
        </div>
        <!-- 发票编号 -->
        <div class="input_valye">
          <span class="demonstration">售后编号：</span>
          <input
            type="text"
            class="input"
            placeholder="请输入售后编号"
            v-model="searchValue.afterSaleSn"
            style="width: 200px"
            @keyup.enter="search" />
        </div>
        <div class="input_valye">
          <span class="demonstration">售后方式：</span>
          <el-select
            v-model="searchValue.type"
            class="m-2"
            placeholder="请选择售后类型"
            style="color: #666; width: 200px"
            @change="search">
            <el-option v-for="item in type_options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 底部按钮区域 -->
      <div class="bottom_btn">
        <el-button class="solid" style="margin-top: 0" @click="search">查询</el-button>
        <el-button class="hollow" style="margin-top: 0" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table cyr-flex" style="">
      <!-- 表格导航栏 -->
      <div class="nav">
        <ul class="nav_ul">
          <li v-for="(item, index) in nav_list" :key="index" :class="item.class" @click="navChange(item)">
            <span class="nav_lis">{{ item.text }}</span>
          </li>
        </ul>
      </div>
      <!-- 表格区域 -->
      <el-table
        id="out-table"
        :data="tableData"
        :row-class-name="tableRowClassName"
        :header-cell-style="{'text-align': 'center'}"
        :show-overflow-tooltip="true"
        border>
        <el-table-column type="selection" width="40" />
        <el-table-column prop="shopId" label="店铺ID" align="center" />
        <el-table-column prop="shopName" label="店铺名称" align="center">
          <template #default="item">
            <el-text tag="span" style="cursor: pointer" @click="dispose(item.row)">{{ item.row.shopName }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="afterSaleSn" label="售后编号" align="center" />
        <el-table-column prop="orderSn" label="订单编号" align="center" />
        <el-table-column prop="userId" label="用户ID" align="center" />
        <el-table-column prop="createAt" label="提交时间" align="center" />
        <el-table-column prop="updateAt" label="更新时间" align="center" />
        <el-table-column prop="type" label="售后方式" width="140" align="center" :formatter="(typeFormatter as any)" />
        <el-table-column
          prop="status"
          label="售后状态"
          width="120"
          align="center"
          :formatter="(statusFormatter as any)" />
        <el-table-column label="操作" width="200" class="operation" :show-overflow-tooltip="false">
          <template #default="item">
            <div class="table_btn">
              <el-button size="small" class="none" @click="dispose(item.row)">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <smartPager
        v-model:current-page="searchValue.page"
        v-model:page-size="searchValue.rows"
        :total="total"
        @change="pageChange" />
    </div>
    <!-- 查看订单 -->
    <el-drawer v-model="orderShow" class="order" style="position: absolute !important; z-index: 40 !important">
      <div class="box fristbox">
        <div class="title">
          <div class="right">
            <!-- ************  退货退款  ************** -->
            <div v-if="typeShow === 0">
              <!-- ************  退货申请拒绝  ************** -->
              <el-steps
                :active="statusShow + 1"
                align-center
                finish-status="success"
                class="close"
                v-if="statusShow === 2"
                :status="statusShow === 2 ? 'error' : ''">
                <el-step title="提交申请" description="2023-07-19 15:14:12" />
                <el-step
                  title="商家已拒绝"
                  description="2023-07-19 15:14:12"
                  :icon="CircleClose"
                  :status="statusShow === 2 ? 'error' : ''" />
              </el-steps>
              <!-- ************  退货，审核拒绝收货  ************** -->
              <el-steps
                :active="statusShow + 1"
                align-center
                finish-status="success"
                class="close"
                v-else-if="statusShow === 8">
                <el-step title="提交申请" description="2023-07-19 15:14:12" />
                <el-step title="商家已同意" description="2023-07-19 15:14:12" />
                <el-step title="买家发货" description="2023-07-19 15:14:12" />
                <el-step
                  title="商家审核，拒绝售后"
                  description="2023-07-19 15:14:12"
                  :icon="CircleClose"
                  :status="statusShow === 8 ? 'error' : ''" />
              </el-steps>
              <el-steps :active="statusShow + 1" align-center finish-status="success" v-else>
                <el-step title="提交申请" description="2023-07-19 15:14:12" />
                <el-step title="等待商家同意" v-if="statusShow == 1" description="2023-07-19 15:14:12" />
                <el-step title="等待商家同意" v-else description="2023-07-19 15:14:12" />
                <el-step title="买家发货" description="2023-07-19 15:14:12" />
                <el-step
                  title="商家收货审核"
                  description="2023-07-19 15:14:12"
                  :status="statusShow === 3 ? 'process' : ''" />
                <el-step
                  title="售后完成"
                  description="2023-07-19 15:14:12"
                  :status="
                    statusShow === 3 ||
                    statusShow === 4 ||
                    statusShow === 5 ||
                    statusShow === 6 ||
                    statusShow === 7 ||
                    statusShow === 8
                      ? 'wait'
                      : statusShow === 9
                      ? 'process'
                      : ''
                  " />
              </el-steps>
            </div>
            <!-- ************  退款  ************** -->
            <div v-if="typeShow === 1">
              <!-- ************  退货申请拒绝  ************** -->
              <el-steps
                :active="statusShow + 1"
                align-center
                finish-status="success"
                class="close"
                v-if="statusShow === 2"
                :status="statusShow === 2 ? 'error' : ''">
                <el-step title="提交申请" description="2023-07-19 15:14:12" />
                <el-step
                  title="商家已拒绝"
                  description="2023-07-19 15:14:12"
                  :icon="CircleClose"
                  :status="statusShow === 2 ? 'error' : ''" />
              </el-steps>
              <el-steps :active="statusShow + 1" align-center finish-status="success" v-else>
                <el-step title="提交申请" description="2023-07-19 15:14:12" />
                <el-step title="商家已同意" description="2023-07-19 15:14:12" />
                <el-step title="退款中" description="2023-07-19 15:14:12" :status="statusShow === 3 ? 'process' : ''" />
                <el-step
                  title="售后完成"
                  description="2023-07-19 15:14:12"
                  :status="
                    statusShow === 3 ||
                    statusShow === 4 ||
                    statusShow === 5 ||
                    statusShow === 6 ||
                    statusShow === 7 ||
                    statusShow === 8 ||
                    statusShow === 9
                      ? 'wait'
                      : ''
                  " />
              </el-steps>
            </div>
            <!-- ************  换货  ************** -->
            <div v-if="typeShow === 2">
              <!-- ************  申请拒绝  ************** -->
              <el-steps
                :active="statusShow + 1"
                align-center
                finish-status="success"
                class="close"
                v-if="statusShow === 2"
                :status="statusShow === 2 ? 'error' : ''">
                <el-step title="提交申请" description="2023-07-19 15:14:12" />
                <el-step title="商家已拒绝" description="2023-07-19 15:14:12" :icon="CircleClose" />
              </el-steps>
              <!-- ************  退货，审核拒绝收货  ************** -->
              <el-steps
                :active="statusShow + 1"
                align-center
                finish-status="success"
                class="close"
                v-else-if="statusShow === 8"
                :status="statusShow === 8 ? 'error' : ''">
                <el-step title="提交申请" description="2023-07-19 15:14:12" />
                <el-step title="商家已同意" description="2023-07-19 15:14:12" />
                <el-step title="买家发货" description="2023-07-19 15:14:12" />
                <el-step title="商家审核，拒绝售后" description="2023-07-19 15:14:12" :icon="CircleClose" />
              </el-steps>
              <el-steps :active="statusShow + 1" align-center finish-status="success" v-else>
                <el-step title="提交申请" description="2023-07-19 15:14:12" />
                <el-step title="商家已同意" description="2023-07-19 15:14:12" />
                <el-step title="买家发货" description="2023-07-19 15:14:12" />
                <el-step
                  title="商家收货审核"
                  description="2023-07-19 15:14:12"
                  :status="statusShow === 3 ? 'process' : ''" />
                <el-step
                  title="商家发货"
                  description="代发货"
                  :status="statusShow === 3 ? 'wait' : statusShow === 4 ? 'process' : ''" />
                <el-step
                  title="买家收货"
                  description="售后完成"
                  :status="
                    statusShow === 4 || statusShow === 5 || statusShow === 6 || statusShow === 7 || statusShow === 8
                      ? 'wait'
                      : statusShow === 9
                      ? 'process'
                      : ''
                  " />
              </el-steps>
            </div>
            <!-- ************  换货  ************** -->
            <!-- 待处理，商家审核 -->
            <div class="text" v-show="statusShow === 0">
              <div class="shop">待处理，商家审核</div>
              <p class="text1">
                买家申请售后 <span class="time">01</span>天<span class="time">15</span>小时<span class="time">36</span
                >分钟&nbsp;&nbsp;内处理，超时可能会判罚
              </p>
            </div>
            <!-- 退款申请已拒绝 -->
            <div class="text" v-show="typeShow === 2 && statusShow === 2">
              <div class="shop">换货申请已拒绝</div>
              <p class="text1">原因：{{ cause }}</p>
            </div>
            <!-- 买家已发货 -->
            <div class="text" v-show="typeShow === 2 && statusShow === 3">
              <div class="shop">商家收货审核商品</div>
              <p class="text1">
                买家已发货，商家请在<span class="time">01</span>天<span class="time">15</span>小时<span class="time"
                  >36</span
                >分钟&nbsp;&nbsp;内收货并确认商品信息，超时可能会判罚
              </p>
            </div>
            <!-- 等待商家换货发货 -->
            <div class="text" v-show="typeShow === 2 && statusShow === 4">
              <div class="shop">等待商家换货发货</div>
              <p class="text1">
                商家请在请在 <span class="time">01</span>天<span class="time">15</span>小时<span class="time">36</span
                >分钟&nbsp;&nbsp;内发货商品，超时可能会判罚
              </p>
            </div>
            <!-- 卖家已发货 -->
            <div class="text" v-show="typeShow === 2 && statusShow === 6">
              <div class="shop">等待买家收货</div>
              <p class="text1">
                商家已发货，订单将在 <span class="time">01</span>天<span class="time">15</span>小时<span class="time"
                  >36</span
                >分钟&nbsp;&nbsp;内自动确认收货
              </p>
            </div>
            <!-- 售后完成 -->
            <div class="text" v-show="statusShow === 10">
              <div class="shop">售后完成</div>
            </div>
            <!-- ************  退货  ************** -->
            <!-- 退款申请已拒绝 -->
            <div class="text" v-if="(typeShow === 0 || typeShow === 1) && statusShow === 2">
              <div class="shop">退款申请已拒绝</div>
              <p class="text1">原因：{{ cause }}</p>
            </div>
            <!-- 等待买家退货 -->
            <div class="text" v-if="(typeShow === 0 || typeShow === 2) && statusShow === 1">
              <div class="shop">等待买家退货</div>
              <p class="text1">
                买家将在<span class="time">01</span>天<span class="time">15</span>小时<span class="time">36</span
                >分钟&nbsp;&nbsp;内退货，超时将会关闭此售后
              </p>
            </div>
            <!-- 商家确认收货并审核退款 -->
            <div class="text" v-if="typeShow === 0 && statusShow === 3">
              <div class="shop">商家确认收货并审核退款</div>
              <p class="text1">
                买家已发货，商家请在<span class="time">01</span>天<span class="time">15</span>小时<span class="time"
                  >36</span
                >分钟&nbsp;&nbsp;内收货并确认商品信息，超时可能判罚
              </p>
            </div>
            <!-- 商家已拒绝继续售后 -->
            <div class="text" v-if="(typeShow === 1 || typeShow === 2) && statusShow === 8">
              <div class="shop">商家已拒绝继续售后</div>
              <p class="text1">原因：{{ cause }}</p>
            </div>
            <!-- 商家确认退款 -->
            <div class="text" v-if="typeShow === 1 && statusShow === 3">
              <div class="shop">商家确认退款</div>
              <p class="text1">
                商家已同意退款，请在<span class="time">01</span>天<span class="time">15</span>小时<span class="time"
                  >36</span
                >分钟&nbsp;&nbsp;内处理，超时可能会判罚
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 售后信息 -->
      <div class="box">
        <div class="user_play">
          <div class="title">
            <div class="box1"></div>
            <span class="name">售后信息</span>
          </div>
          <div class="row">
            <span class="name1">售后编号：{{ afterSale.afterSaleSn }}</span>
          </div>
          <div class="row">
            <span class="name1">申请时间：{{ afterSale.createAt }}</span>
          </div>
          <div class="row">
            <span class="name1"
              >售后方式：<span v-if="afterSale.type == 0">退货退款</span><span v-if="afterSale.type == 1">退款</span
              ><span v-if="afterSale.type == 2">换货</span></span
            >
          </div>
          <div class="row">
            <span class="name1">售后金额：{{ orderArray.price }}</span>
          </div>
        </div>
        <div class="user_play">
          <div class="title">
            <div class="box1"></div>
            <span class="name">订单信息</span>
          </div>
          <div class="row">
            <span class="name1">订单编号：{{ orderArray.orderSn }}</span>
          </div>
          <div class="row">
            <span class="name1">联系人：{{ user.username }}</span>
          </div>
          <div class="row">
            <span class="name1">联系电话：{{ user.phone }}</span>
          </div>
        </div>
      </div>
      <!-- 物流信息 -->
      <div class="box" v-if="logistics.length != 0">
        <div class="head_title">
          <div class="box1"></div>
          物流信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="logistics"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column type="expand">
            <template #default="item">
              <div class="logistics">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="activity.timestamp">
                    {{ activity.content }}
                  </el-timeline-item>
                </el-timeline>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="logisticSn" label="物流公司" align="center" />
          <el-table-column prop="logisticSn" label="物流单号" align="center" />
          <el-table-column prop="status" label="物流状态" align="center" :formatter="(logisticsFormatter as any)" />
        </el-table>
      </div>
      <!-- 发票信息 -->
      <div class="box" v-if="invoice.length != 0">
        <div class="head_title">
          <div class="box1"></div>
          发票信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="invoice"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="type" label="发票类型" width="100" align="center" />
          <el-table-column prop="riseType" label="发票抬头类型" width="160" align="center" />
          <el-table-column prop="invoiceHeader" label="发票类型" width="100" align="center" />
          <el-table-column prop="content" label="发票内容" width="100" align="center" />
          <el-table-column prop="phone" label="收票人手机" width="100" align="center" />
          <el-table-column prop="email" label="收票人邮箱" width="100" align="center" />
        </el-table>
      </div>
      <!-- 商品信息 -->
      <div class="box">
        <div class="head_title">
          <div class="box1"></div>
          商品信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="product"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="orderSn" label="商品图片" width="100" align="center">
            <template #default="item">
              <img :src="item.row.mainImgUrl" alt="" style="width: 100px; height: 100px" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" width="160" align="center" />
          <el-table-column prop="salePrice" label="售价" width="100" align="center" />
          <el-table-column prop="dealPrice" label="成交价" width="100" align="center" />
          <el-table-column prop="buyCount" label="下单数量" width="100" align="center" />
          <el-table-column prop="productQuantity" label="售后数量" width="100" align="center" />
          <el-table-column prop="skuCode" label="属性" width="100" align="center" />
          <el-table-column prop="price" label="商品金额" width="100" align="center" />
          <el-table-column prop="refundPrice" label="售后金额" width="100" align="center" />
        </el-table>
      </div>
      <!-- 费用信息 -->
      <div class="box">
        <div class="head_title">
          <div class="box1"></div>
          费用信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="cost"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="price" label="商品合计" align="center" />
          <el-table-column prop="districtMoney" label="优惠金额" width="100" align="center" />
          <el-table-column prop="refundPrice" label="实际应退金额" align="center" />
        </el-table>
      </div>
      <!-- 操作信息 -->
      <div class="box">
        <div class="head_title">
          <div class="box1"></div>
          操作信息
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="logs"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }">
          <el-table-column prop="adminId" label="操作者" align="center" />
          <el-table-column prop="operateAt" label="操作时间" align="center" />
          <el-table-column prop="afterStatus" label="订单状态" align="center">
            <template #default="item">
              <span v-if="item.row.afterStatus == 0">等待商家同意售后</span>
              <span v-else-if="item.row.afterStatus == 1">商家拒绝售后</span>
              <span v-else-if="item.row.afterStatus == 2">买家已发货，商家请在</span>
              <span v-else-if="item.row.afterStatus == 3">商家已收货</span>
              <span v-else-if="item.row.afterStatus == 4">收货验收中</span>
              <span v-else-if="item.row.afterStatus == 5">等待商家发货</span>
              <span v-else-if="item.row.afterStatus == 6">商家已发货</span>
              <span v-else-if="item.row.afterStatus == 7">买家已收货</span>
              <span v-else-if="item.row.afterStatus == 8">商家拒绝售后</span>
              <span v-else-if="item.row.afterStatus == 9">退款中</span>
              <span v-else>售后完成</span>
            </template>
          </el-table-column>
          <el-table-column prop="note" label="备注" width="100" align="center">
            <template #default="item">
              <span v-if="item.row.note == ''">-</span>
              <span v-else>{{ item.row.note }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {RequestAfterSaleDetal, RequestSynthesizeAftersale} from '@/api/path/index.js';
import {Message, CircleClose} from '@element-plus/icons-vue';
import moment from 'moment';
import {ElMessage} from 'element-plus';
const radio = ref(''); //单选按钮
const total = ref(0); //发票总数
const tableData = ref([]); //发票数组
const orderShow = ref(false); //控制处理售后显示
import {useRouter} from 'vue-router';
const router = useRouter();
onMounted(() => {
  requestSynthesizeAftersale();
  handleResize();
  window.addEventListener('resize', handleResize);
});
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  console.log('Search Box height11111111111111111111111111111:', searchBox.value.clientHeight);
  const searchBoxHeight = searchBox.value!.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
  // console.log(
  //   "Search Box height11111111111111111111111111111:",
  //   searchBoxHeight
  // );
};
const sendMes = () => {
  router.push('/store/call_center?id=U' + user.value.id);
};
const status_list = ref<any>([]); //暂时存储状态

const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
/**
 * 表格导航列表
 */
const nav_list = ref([
  {
    class: ['navlist', 'nav_li'],
    text: '全部',
    status: [],
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '待处理',
    status: [0],
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '处理中',
    status: [1, 3, 4, 5, 6, 7, 9],
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '已完成',
    status: [10],
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '已拒绝',
    status: [2, 8],
    num: 0,
  },
]);
/**
 * 获取售后信息
 */
const requestSynthesizeAftersale = async () => {
  const a = await RequestSynthesizeAftersale(searchValue.value);
  status_list.value = ref([]);
  tableData.value = a.resultObj.afterSales;
  total.value = a.resultObj.totalCount;
};

/**
 * 表格导航点击事件
 */

const navChange = (item: any) => {
  for (let i = 0; i < nav_list.value.length; i++) {
    const filteredClasses = nav_list.value[i].class.filter((className) => className !== 'navlist');
    nav_list.value[i].class = filteredClasses;
  }
  searchValue.value.status = item.status;
  status_list.value = item.status;
  searchValue.value.page = 1;
  item.class.push('navlist');
  requestSynthesizeAftersale();
};
/**
 * 表格颜色区分
 */
const tableRowClassName = ({row, rowIndex}: any) => {
  if (rowIndex % 2 !== 0) {
    return 'warning-row';
  }
};
/**
 * 搜索值
 */
const searchValue = ref<any>({
  startAt: '',
  endAt: '',
  orderSn: '',
  afterSaleSn: '',
  type: '',
  status: [],
  page: 1,
  rows: 10,
  shopId: '',
  shopName: '',
});
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    startAt: '',
    endAt: '',
    orderSn: '',
    afterSaleSn: '',
    type: '',
    status: [],
    page: 1,
    rows: 10,
    shopId: '',
    shopName: '',
  };
  requestSynthesizeAftersale();
  status_list.value = [];
  radio.value = '';
  console.log('123456', searchValue.value);
};
// 开始时间
const startTime = () => {
  radio.value = '0';
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format('yyyy-MM-DD HH:mm:ss');
  search();
};
// 结束时间
const endTime = () => {
  radio.value = '0';
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format('yyyy-MM-DD HH:mm:ss');
  search();
};
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startAt = '';
  searchValue.value.endAt = '';
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  if (radio.value === '1') {
    searchValue.value.startAt = moment(now).format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '2') {
    searchValue.value.startAt = moment(now).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '3') {
    searchValue.value.startAt = moment(now).subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '4') {
    searchValue.value.startAt = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '5') {
    searchValue.value.startAt = moment(now).subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '6') {
    searchValue.value.startAt = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startAt = moment(now).subtract(1, 'years').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  }
  search();
};
/**
 * 搜索点击事件
 */
const search = async () => {
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startAt = '';
  } else {
    // 判断是否两个时间都填写了
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      // 判断开始时间不能晚于结束时间
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        searchValue.value.page = 1;
        requestSynthesizeAftersale();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endAt = '';
      }
    } else {
      // 表示两个时间填写了任意一个
      searchValue.value.page = 1;
      requestSynthesizeAftersale();
    }
  }
};
/**
 * 遮罩层数据
 */
const transportInfo = ref<any>([]);
const afterSale = ref<any>([]); //售后信息
const logistics = ref<any>([]); //物流信息
const orderArray = ref<any>([]); //订单信息
const product = ref<any>([]); //产品信息
const user = ref<any>([]); //用户信息
const typeShow = ref(0); //售后形式数字
const afterSaleType = ref(''); //售后形式中文
const statusShow = ref(0); //售后状态
const cost = ref<any>([]); //费用信息
const productUrl = ref(''); //商品照片
const invoice = ref<any>([]); //发票信息
const cost1 = ref({
  orderId: 0,
  type: 0,
  adminId: 1,
  price: '',
  transportFee: '',
  districtMoney: '',
  reality: '',
  note: '',
});
const activities = ref<any>([]); //时间线
/**
 * 点击处理
 */
const refundPrice = ref(0);
const cause = ref('');
const logs = ref([]);
const dispose = async (item: any) => {
  // 显示组件
  orderShow.value = true;
  // 获取所有信息
  const a = await RequestAfterSaleDetal(item.id);
  console.log('测试', a.resultObj);
  cause.value = a.resultObj.refuseReason;
  // 处理物流信息
  afterSale.value = a.resultObj.afterSale;
  logistics.value = a.resultObj.logistics;
  orderArray.value = a.resultObj.order;
  refundPrice.value = 0;
  for (let i = 0; i < a.resultObj.afterSaleProducts.length; i++) {
    product.value[i] = {
      mainImgUrl: a.resultObj.afterSaleProducts[i].product.pics[0].url,
      name: a.resultObj.afterSaleProducts[i].product.name,
      salePrice: a.resultObj.afterSaleProducts[i].product.salePrice,
      dealPrice: a.resultObj.afterSaleProducts[i].orderProduct.finalPrice,
      buyCount: a.resultObj.afterSaleProducts[i].orderProduct.quantity,
      productQuantity: a.resultObj.afterSaleProducts[i].quantity,
      skuCode: a.resultObj.afterSaleProducts[i].skuName,
      price: a.resultObj.afterSaleProducts[i].dealPrice * a.resultObj.afterSaleProducts[i].quantity,
      refundPrice: a.resultObj.afterSaleProducts[i].refundPrice,
    };

    refundPrice.value += product.value[i].refundPrice;
  }

  user.value = a.resultObj.user;
  // 判断是否有发票信息
  if (a.resultObj.invoice !== null) {
    invoice.value = [
      {
        type: a.resultObj.invoice.type,
        riseType: a.resultObj.invoice.riseType,
        invoiceHeader: a.resultObj.invoice.invoiceHeader,
        content: '商品明细',
        phone: a.resultObj.invoice.phone,
        email: a.resultObj.invoice.email,
      },
    ];
    // 处理发票信息回显发票类型
    if (a.resultObj.invoice.type === 0) {
      invoice.value[0].type = '普票';
    } else {
      invoice.value[0].type = '专票';
    }
    if (a.resultObj.invoice.riseType === 0) {
      invoice.value[0].riseType = '个人';
    } else {
      invoice.value[0].riseType = '单位';
    }
  } else {
    invoice.value = [];
  }
  // 判断是否有物流信息
  if (a.resultObj.logistics !== null) {
    logistics.value = [
      {
        type: a.resultObj.invoice.type,
        logisticSn: a.resultObj.logistics.logisticSn,
        status: a.resultObj.logistics.status,
      },
    ];
  } else {
    logistics.value = [];
  }
  statusShow.value = afterSale.value.status;
  typeShow.value = afterSale.value.type;
  productUrl.value = a.resultObj.productUrl;
  // 处理售后方式
  if (afterSale.value.type === 0) {
    afterSaleType.value = '退货退款';
  } else if (afterSale.value.type === 1) {
    afterSaleType.value = '退款';
  } else {
    afterSaleType.value = '换货';
  }
  orderArray.value.receiver = a.resultObj.receiver;
  orderArray.value.receiverAddress = a.resultObj.receiverAddress;
  // 处理物流信息
  if (a.resultObj.transportInfo !== null) {
    console.log(a.resultObj.transportInfo);

    transportInfo.value = JSON.parse(a.resultObj.transportInfo.replace(', error=null)', ' '));
    activities.value = transportInfo.value.data;
    console.log('物流', transportInfo.value.data);
  }

  // 处理商品费用
  cost.value = [
    {
      price: a.resultObj.order.price,
      districtMoney: 0,
      refundPrice: refundPrice.value,
    },
  ];
  console.log('打印', a.resultObj);

  console.log('商品费用', cost.value);

  cost1.value = {
    orderId: orderArray.value.id,
    type: 0,
    adminId: 1,
    price: cost.value[0].price,
    transportFee: cost.value[0].transportFee,
    districtMoney: cost.value[0].districtMoney,
    reality: cost.value[0].reality,
    note: cost.value[0].note,
  };
  // 操作记录
  logs.value = a.resultObj.logs;
};
/**
 * 通过返回的status返回对应的状态
 */
const statusFormatter = (row: any) => {
  if (row.status === 0) {
    return '提交申请';
  }
  if (row.status === 1) {
    return '同意申请';
  }
  if (row.status === 2) {
    return '拒绝申请';
  }
  if (row.status === 3) {
    return '买家已发货';
  }
  if (row.status === 4) {
    return '卖家已收货';
  }
  if (row.status === 5) {
    return '卖家待发货';
  }
  if (row.status === 6) {
    return '卖家已发货';
  }
  if (row.status === 7) {
    return '买家已收货';
  }
  if (row.status === 8) {
    return '卖家已拒绝';
  }
  if (row.status === 9) {
    return '退款中';
  }
  if (row.status === 10) {
    return '售后完成';
  }
};
/**
 * 通过返回的type返回对应的类型
 */
const typeFormatter = (row: any) => {
  if (row.type === 0) {
    return '退货退款';
  }
  if (row.type === 1) {
    return '退款';
  }
  if (row.type === 2) {
    return '换货';
  }
};
/**
 * 根据物流状态返回物流信息
 */
const logisticsFormatter = (row: any) => {
  if (row.type === 0) {
    return '未发货';
  }
  if (row.type === 1) {
    return '已发货';
  }
};
/**
 * 状态选择器
 */
const status_options = [
  {
    value: [0],
    label: '待处理',
  },
  {
    value: [1, 3, 4, 5, 6, 7, 9],
    label: '处理中',
  },
  {
    value: [10],
    label: '已完成',
  },
  {
    value: [2, 8],
    label: '已拒绝',
  },
];
/**
 * 售后形式选择器
 */
const type_options = [
  {
    value: 0,
    label: '退货退款',
  },
  {
    value: 1,
    label: '退款',
  },
  {
    value: 2,
    label: '换货',
  },
];
/**
 * 分页
 */
const pageChange = async (val: number) => {
  requestSynthesizeAftersale();
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nav_ul {
  width: 100%;

  .nav_li {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav_lis {
    position: relative;
    cursor: pointer;

    .number {
      padding: 0 5px;
      display: block;
      line-height: 16px;
      height: 16px;
      color: #fff;
      font-size: 12px;
      background: #409eff;
      border-radius: 8px;
      position: absolute;
      top: 2px;
      right: -12px;
    }
  }

  .navlist {
    .number {
      background: #409eff;
      color: #fff;
    }
  }
}

.input_valye {
  margin-bottom: 15px;
}

.table {
  height: calc(100% - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  height: calc(100% - 100px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

.el-table .warning-row {
  background: #f2f7fc;
}

:deep(.el-drawer.rtl) {
  background: #f5f9ff;
  width: 800px !important;
}

:deep(.el-overlay) {
  z-index: 40 !important;
  padding: static;
}

:deep(.el-drawer__header) {
  margin: 0;
}

:deep(.is-process) {
  color: #409eff;
}

:deep(.is-process .el-step__icon.is-text) {
  border: 2px solid #409eff;
  background: #409eff;
  color: #fff;
}

:deep(.is-finish .el-step__line) {
  background: #409eff;
}

::v-deep .el-select__placeholder.is-transparent {
  color: #666;
}

.order {
  .box {
    width: 96%;
    padding: 20px;
    background: #ffffff;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;

    .title {
      width: 100%;
      display: flex;

      .right {
        flex: 1;

        .el-steps {
          padding: 0 0 20px 0;
          border-bottom: 1px solid #b9b9b9;
        }

        .text {
          width: 100%;
          margin: 10px 0 25px 0;

          .shop {
            width: 100%;
            height: 30px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #3d3d3d;
            font-weight: bold;
            margin-top: 20px;
          }

          .time {
            display: inline-block;
            padding: 5px;
            background: #f5f9ff;
            color: #409eff;
          }

          .text1 {
            font-size: 14px;
            color: #ababab;
          }
        }
      }
    }

    .mes {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .info {
        width: 195px;
        font-size: 14px;
        color: #797979;
        margin-top: 15px;
      }

      .addremark {
        display: inline-block;
        color: #116cf8;
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .user_play {
      width: 50%;
      font-size: 14px;

      .box1 {
        width: 3px;
        height: 15px;
        border: 0;
        background: #116cf8;
        margin-right: 10px;
      }

      .name {
        font-weight: bold;
        font-size: 15px;
      }

      .title {
        display: flex;
        border: 0;
        align-items: center;
        font-size: 15px;
        margin-bottom: 15px;

        .box1_other {
          background: #fff;
        }
      }

      .row {
        margin-top: 5px;

        .name1 {
          color: #b8b8b8;
        }
      }
    }

    .head_title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 15px;
      font-weight: bold;

      .box1 {
        width: 3px;
        height: 20px;
        background: #116cf8;
        margin-right: 10px;
      }
    }

    .logistics {
      margin-top: 20px;
    }

    .deposit {
      background: #fff;
      border: 0px;
      color: #409eff;
    }
  }

  .fristbox {
    margin-top: 0px;
  }
}
</style>
